.navbar
  .navbar-inner
    .left.sliding
      a(href="index.html").back.link
        i.icon.icon-back
        span Back
    .center.sliding Sortable List
    .right
      a(href="#").link.toggle-sortable.icon-only Edit
.pages.navbar-through
  .page(data-page="sortable-list")
    .page-content
      .content-block
        p Just click "Edit" button on navigation bar to enable sorting
      .list-block.sortable
        ul
          li
            .item-content
              .item-media
                i.icon.icon-f7
              .item-inner 
                .item-title 1 Jenna Smith
                .item-after CEO
            .sortable-handler
          li
            .item-content
              .item-media
                i.icon.icon-f7
              .item-inner 
                .item-title 2 John Doe
                .item-after Director
            .sortable-handler
          li
            .item-content
              .item-media
                i.icon.icon-f7
              .item-inner 
                .item-title 3 John Doe
                .item-after Developer
            .sortable-handler
          li
            .item-content
              .item-media
                i.icon.icon-f7
              .item-inner 
                .item-title 4 Aaron Darling
                .item-after Manager
            .sortable-handler
          li
            .item-content
              .item-media
                i.icon.icon-f7
              .item-inner 
                .item-title 5 Calvin Johnson
                .item-after Accounter
            .sortable-handler
          li
            .item-content
              .item-media
                i.icon.icon-f7
              .item-inner 
                .item-title 6 John Smith
                .item-after SEO
            .sortable-handler
          li
            .item-content
              .item-media
                i.icon.icon-f7
              .item-inner 
                .item-title 7 Chloe
                .item-after Manager
            .sortable-handler
      .list-block.media-list.sortable
        ul
          li
            .item-content
              .item-media
                img(src="http://lorempixel.com/160/160/people/1", width="80")
              .item-inner
                .item-title-row
                  .item-title Yellow Submarine
                  .item-after $15
                .item-subtitle Beatles
                .item-text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.
            .sortable-handler
          li
            .item-content
              .item-media
                img(src="http://lorempixel.com/160/160/people/2", width="80")
              .item-inner
                .item-title-row
                  .item-title Don't Stop Me Now
                  .item-after $22
                .item-subtitle Queen
                .item-text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.
            .sortable-handler
          li
            .item-content
              .item-media
                img(src="http://lorempixel.com/160/160/people/3", width="80")
              .item-inner
                .item-title-row
                  .item-title Billie Jean
                  .item-after $16
                .item-subtitle Michael Jackson
                .item-text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.
            .sortable-handler